<template>
    <div class="km-tag" type="{{attr.type}}" {{attr.disabled}}>
        <slot name="km-text">默认</slot>
    </div>
</template>
<script>
    export default function() {
        let attr = this.reactive({
            type: 'default',
            disabled: ""
        });

        this.attred = (name, oldValue, newValue) => {
            if (typeof attr[name] != "undefined") {
                attr[name] = (newValue == "" ? name : newValue);
            }
        }
    }
</script>
<style>
    .km-tag {
        display: inline-flex;
        background-color: var(--gray-shallow);
        color: var(--gray);
        border: 1px solid var(--gray);
        padding: 0px 11px;
        line-height: 1;
        box-sizing: border-box;
        cursor: default;
        height: 22px;
        align-items: center;
        flex-wrap: nowrap;
        font-size: var(--font-size);
        border-radius: var(--border-radius);
    }

    .km-tag[disabled] {
        background-color: var(--gray-shallow);
        color: var(--gray-middle);
        border-color: var(--gray-shallow);
        cursor: not-allowed;
    }

    .km-tag[type="success"] {
        background-color: var(--green-shallow);
        color: var(--green);
        border-color: var(--green);
    }

    .km-tag[type="success"][disabled] {
        background-color: var(--green-shallow);
        color: var(--green-middle);
        border-color: var(--green-shallow);
    }

    .km-tag[type="primary"] {
        background-color: var(--blue-shallow);
        color: var(--blue);
        border-color: var(--blue);
    }

    .km-tag[type="primary"][disabled] {
        background-color: var(--blue-shallow);
        color: var(--blue-middle);
        border-color: var(--blue-shallow);
    }

    .km-tag[type="warning"] {
        background-color: var(--yellow-shallow);
        color: var(--yellow);
        border-color: var(--yellow);
    }

    .km-tag[type="warning"][disabled] {
        background-color: var(--yellow-shallow);
        color: var(--yellow-middle);
        border-color: var(--yellow-shallow);
    }

    .km-tag[type="error"] {
        background-color: var(--red-shallow);
        color: var(--red);
        border-color: var(--red);
    }

    .km-tag[type="error"][disabled] {
        background-color: var(--red-shallow);
        color: var(--red-middle);
        border-color: var(--red-shallow);
    }
</style>